<template>
  <el-card class="box-card mb20">
    <div slot="header" class="clearfix">
      <span>规则信息</span>
      <el-button
        style="float: right; margin-left: 10px"
        type="primary"
        icon="el-icon-edit"
        size="mini"
        @click="$emit('edit-rule')"
        >编辑规则</el-button
      >
    </div>
    <el-form ref="form" :model="form" label-width="120px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="规则名称" prop="name">
            <span>{{ form.name }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="规则编号" prop="code">
            <span>{{ form.code }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="触发类型" prop="triggerType">
            <dict-tag
              :options="dict.type.iot_rule_trigger_type"
              :value="form.triggerType"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="生效时间类型" prop="takeEffectType">
            <dict-tag
              :options="dict.type.iot_rule_time_type"
              :value="form.takeEffectType"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="运行状态" prop="runState">
            <dict-tag :options="dict.type.iot_state" :value="form.runState" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建时间" prop="createTime">
            <span>{{ form.createTime }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="form.takeEffectType === 'appoint'">
        <el-col :span="8">
          <el-form-item label="生效周期" prop="effectiveDate">
            <span>{{ form.effectiveDate }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="生效时间范围" prop="takeEffectTime">
            <span>{{ form.takeEffectTime }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="生效周期" prop="takeEffectWeeks">
            <span>{{ form.takeEffectWeeks }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="规则描述" prop="remark">
            <span>{{ form.remark }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
</template>

<style scoped>
.mb20 {
  margin-bottom: 20px;
}
</style>

<script>
export default {
  dicts: ["iot_rule_time_type", "iot_state", "iot_rule_trigger_type"],
  props: {
    form: {
      type: Object,
      required: true,
    },
  },
};
</script>
